import Vue from 'vue'
import VueRouter from 'vue-router'
import VueCookies from 'vue-cookies'
import Layout from '@/layout/index'
import store from '../store'
import { filterAsyncRouter } from '@/utils/permission'
Vue.use(VueRouter)

// 获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
// 修改原型对象中的push方法
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
const routes = [
  {
    // 登录
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login'),
    meta: {
      requireAuth: true
    }
  },
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        // 主页
        path: '/dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard'),
        meta: {
          requireAuth: true
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
// 路由权限
const whiteList = ['/login']
router.beforeEach((to, from, next) => {
  // 获取token
  const token = VueCookies.get('SCDQ-TOEKN')
  // 获取token是否存在
  if (token) {
    next()
    // 如果存在与白名单内，登陆后不能进入，会跳转路由去
    if (whiteList.includes(to.path)) {
      next('/')
    } else {
      // 如果vuex中没有存储的menus
      if (!store.state.subMenus.length) {
        // localStorage.removeItem('menus')
        // store.commit('SET_SubMenus', [])
        addList(next, to)
      } else {
        next()
      }
    }
  } else {
    // 如果没有登录，也没有在白名单，那么就去登录页面。
    if (!whiteList.includes(to.path)) {
      next('/login')
    } else {
      // 如果是白名单 就通行。
      next()
    }
  }
})
// 向路由表中添加数据
// component： 从字符串， 改成为 真是的路由。
function addList (next, to) {
  const menus = localStorage.getItem('menus') ? JSON.parse(localStorage.getItem('menus')) : []
  // menus 改变成真实的路由
  const asyncRouter = filterAsyncRouter(menus)
  store.commit('SET_SubMenus', asyncRouter)
  //  每次都会进行添加，这时要通过vuex的数组长度进行判断
  routes.push(...asyncRouter)
  // 向路由中添加新的路由规则 是真正能得到渲染的
  routes.forEach(item => {
    router.addRoute(item)
  })
  router.addRoute({ path: '*', name: '404', component: () => import('@/views/404.vue') })
  // 通过当前路由守卫
  next({ ...to })
}
export default router
